<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="个人信息"
        left-arrow
        @click-left="$router.back()"
      />
    </header>
    <div class="content setuser">
      <div class="top">
        <van-uploader :afterRead="afterRead" :max-size="1024*1024" @oversize="oversize">
          <van-image
            round
            width="1rem"
            height="1rem"
            :src="avatar"
          />
        </van-uploader>
        <div class="userName">
          <h4>{{nickName}}</h4>
        </div>
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="nickName"
          name="nickName"
          label="昵称"
          placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field
          readonly
          clickable
          name="sex"
          label="性别"
          :value="value2"
          placeholder="选择性别"
          @click="showPicker2 = true"
        />
        <van-popup v-model="showPicker2" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker2 = false"
            @confirm="onConfirm2"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="birthday"
          :value="value"
          label="出生年月"
          placeholder="请选择年月日"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-datetime-picker
            @confirm="onConfirm"
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
          />
        </van-popup>
        <van-field
          v-model="tel"
          type="tel"
          name="tel"
          label="绑定手机"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
      <van-button round block type="default" @click="exit">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Cookies from 'js-cookie'
import { NavBar, Uploader, Image as VanImage, Button, Form, Field, Popup, DatetimePicker, Toast, Dialog, Picker } from 'vant'
import { getUserMsg, setUserMsg } from '../../api/index.js'
Vue.use(NavBar)
Vue.use(Uploader)
Vue.use(VanImage)
Vue.use(Button)
Vue.use(Form)
Vue.use(Field)
Vue.use(Popup)
Vue.use(DatetimePicker)
Vue.use(Toast)
Vue.use(Dialog)
Vue.use(Picker)

export default {
  name: 'app',

  data () {
    return {
      value2: '',
      showPicker2: false,
      columns: ['高富帅', '白富美'],
      avatar: '',
      nickName: '',
      sex: '',
      tel: '',
      birthday: '',
      showPicker: false,
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      value: ''
    }
  },
  mounted () {
    getUserMsg({
      userId: Cookies.get('userId')
    }).then(res => {
      console.log(res.data.data, 1234567)
      // 页面初始请求到数据时要把默认值改掉
      this.avatar = res.data.data.avatar
      this.nickName = res.data.data.nickName
      this.sex = ''
      this.tel = ''
      this.birthday = ''
    })
  },
  methods: {
    onSubmit (val) {
      // console.log(val.sex)
      const that = this
      if (val.sex === '高富帅') {
        val.sex = 1
      } else if (val.sex === '白富美') {
        val.sex = 0
      }
      // console.log(val)
      // 调用设置用户信息的接口
      setUserMsg({
        userId: Cookies.get('userId'),
        userData: val
      }).then(res => {
        console.log(res)
        this.nickName = ''
        this.sex = ''
        this.tel = ''
        this.birthday = ''
        this.currentDate = ''
        Toast({
          message: '信息修改成功',
          onClose () {
            that.$router.push('/my')
          }
        })
      })
    },
    onConfirm (value) {
      this.showPicker = false
      this.value = value.toLocaleDateString()
    },
    onConfirm2 (value) {
      this.value2 = value
      this.showPicker2 = false
    },
    afterRead (file) {
      // console.log(file.content)
      setUserMsg({
        userId: Cookies.get('userId'),
        userData: {
          avatar: file.content
        }
      }).then(res => {
        console.log(res.data.data)
        this.avatar = res.data.data.avatar
      })
    },
    oversize () {
      Toast('图片大小不允许超过30k')
    },
    exit () {
      Dialog.confirm({
        title: '提示',
        message: '你真的忍心离开吗😢'
      })
        .then(() => {
          Cookies.remove('userId')
          Cookies.remove('isLogin')
          Cookies.remove('token')
          this.$router.push('/login')
        })
        .catch(() => {
          Toast('感谢你的挽留')
        })
    }
  }
}
</script>

<style lang="scss">
.setuser{
  .top{
    background-color: lightblue;
    display:flex;
    flex-direction: column;
    height: 2rem;
    align-items: center;
    justify-content: center;
  }
  .app{
    display: flex;
    justify-content: center;
  }
}
</style>
